<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('编辑论坛导航分类')"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: summernote-css"/>
</head>
<body>
<div class="form-category">
    <form id="form-category-edit" name="form-category-edit" class="form-horizontal" th:object="${category}">
        <input id="categoryId" name="categoryId" th:field="*{categoryId}" type="hidden">
        <h4 class="form-header h4">基本信息</h4>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-sm-2 control-label"><span style="color: red; ">*</span>分类名称：</label>
                    <div class="col-sm-10">
                        <input name="categoryName" th:field="*{categoryName}" placeholder="请输入分类名称" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-sm-2 control-label"><span style="color: red; ">*</span>分类图标：</label>
                    <div class="col-sm-10">
                        <input name="categoryImage" id="categoryImage" th:field="*{categoryImage}" placeholder="请输入分类图标" class="form-control" type="text" required>
                        <br/>
                        <div class="row">
                            <div class="col-md-6">
                                <input type="file" name="file" id="file" accept="image/*"/>
                            </div>
                            <div class="col-md-2">
                                <button id="uploadCategoryImageBtn" type="button" class="btn btn-primary">上传</button>
                            </div>
                            <div class="col-md-4">
                                <img width="32px" height="32px" id="categoryImagePreview" name="categoryImagePreview" th:src="*{categoryImage}"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">分类类型：</label>
                    <div class="col-sm-8">
                        <select name="categoryType" class="form-control m-b">
                            <option value="navigation" th:field="*{categoryType}">导航分类</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">状态：</label>
                    <div class="col-sm-8">
                        <select name="status" class="form-control m-b">
                            <option value="0" th:field="*{status}">正常</option>
                            <option value="1" th:field="*{status}">关闭</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存
        </button>&nbsp;
        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭
        </button>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: summernote-js"/>
<script>
    var prefix = ctx + "bbs/category";

    $("#form-category-edit").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.saveTab(prefix + "/edit", $('#form-category-edit').serialize());
        }
    }

    //上传图标
    $("#uploadCategoryImageBtn").on("click", function () {
        var file = document["form-category-edit"].file.files[0];
        sendCategoryImageFile(file);
    });

    // 上传文件
    function sendCategoryImageFile(file) {
        var data = new FormData();
        data.append("file", file);
        $.ajax({
            type: "POST",
            url: ctx + "common/upload",
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            dataType: 'json',
            success: function (result) {
                if (result.code == web_status.SUCCESS) {
                    $("#categoryImage").val(result.url);
                    $("#categoryImagePreview").attr("src", result.url);
                } else {
                    $.modal.alertError(result.msg);
                }
            },
            error: function (error) {
                $.modal.alertWarning("图片上传失败。");
            }
        });
    }
</script>
</body>
</html>
